<template>
  <div class="all">
    <div class="Search">
      <div class="top-bar">
        <div class="box-top">
          <ul class="top-ui">
            <li>
              <a href="/Login">登录</a>
            </li>
            <li>
              <a href="/Login">注册</a>
            </li>
            <li>
              <a href="/P" @click="massage()">个人中心</a>
            </li>
            <li>
              <a href="/hist" @click="massage()">历史记录</a>
            </li>
            <li>
              <a href="/">退出</a>
            </li>

          </ul>
        </div>
      </div>

      <el-row :gutter="20">
        <el-col :span="16">

          <el-form :rules="rules" :model="text_From">
            <el-form-item label="搜索：">

              <el-input placeholder="中国" show-word-limit @keyup.enter.native="search" v-model="state1"
                class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="search_text()">
                </el-button>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col class="tp" :span="8">
          <el-row type="flex" justify="center">
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-row>

          <el-row type="flex" justify="center">此处上传头像</el-row>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <!--<el-upload  :on-change="handleChange"
      :file-list="fileList" class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件,且不超过500kb
          </div>
        </el-upload>-->
          <input type="file" name="file" @change="showFile($event)" />
        </el-col>
      </el-row>

      <el-row :gutter="20">
              <el-col :span="16">
                </el-col>
            </el-row>
      <el-row :gutter="20">
              <el-col :span="16">
                </el-col>
            </el-row>
      <el-row :gutter="20">
              <el-col :span="16">
                </el-col>
            </el-row>
        <el-row :gutter="20">
              <el-col :span="16">
                </el-col>
            </el-row>
        <el-row :gutter="20">
              <el-col :span="16">
                </el-col>
            </el-row>
        <el-row :gutter="20">
              <el-col :span="16">
                </el-col>
            </el-row>
      <el-row :gutter="20">
        <el-col :span="16">
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-input type="textarea" :rows="12" placeholder="NER:" v-model="textarea1">
          </el-input>
        </el-col>
        <el-col :span="12">
          <el-input type="textarea" :rows="12" placeholder="RE:" v-model="textarea2">
          </el-input>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchOne",
  data() {
    return {
      imageUrl:"",
      restaurants: [],
      state1: '',
      state2: '',
      options: [
      ],//用来放每一条历史记录
      add_time: "",
      baseURL: "http://127.0.0.1:8000/",
      textarea1: [],
      textarea2: [],
      text_From: {
        text: "",
      },
      value: "",
      user_name: "",
      password: "",
      tags: [
        { name: "中国", type: "" },
        { name: "美国", type: "success" },
        { name: "日本", type: "info" },
        { name: "韩国", type: "warning" },
        { name: "英国", type: "danger" },
        { name: "瑞士", type: "warning" },
        { name: "法国", type: "danger" },
      ],
      rules: {
        //限制只可输入文字
        text: [
          { required: true, message: "输入文本不能为空", triggler: "blur" },
        ],
      },
    };
  },
  // created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
  created() {
    let userName = JSON.parse(sessionStorage.getItem("user"))
    if (userName) {
      //userName.username==user.username  对应登录界面设置的key里面的value对应的数组值
      this.user_name = userName.username
      this.password = userName.password
      //console.log("this.username:" + this.user_name)
      // console.log("this.password:" + this.password)
    }

  },

  methods: {
    clickTag(tag) {
      this.text_From.text = tag.name;
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    clearHistory() {
      this.tags = [];
    },
    search() {
      this.tags.unshift({ name: this.text_From.text, type: "" });
    },
    //对用户输入的处理
    search_text() {
      let that = this;
      this.textarea1 = [],
        this.textarea2 = [],
        this.$axios
          .post(this.baseURL + "search_text/", {
            text: that.state1,//数据框的值传给后端
            username: that.user_name,
          })
          .then((res) => {
            if (res.data.code === 1) {
              that.textarea1 = res.data.text;
              that.textarea2 = res.data.text2;
              //console.log(that.textarea1);
              //console.log(that.textarea2);
            } else {
              that.$message.error("后台数据搜索异常");
            }
          })
          .catch((err) => {
            console.log(err);
          });
    },
    //用户进行搜索，数据时间用户名存入后端数据
    add_history() {
      let that = this;
      this.$axios
        .post(this.baseURL + "add_history/", {
          text: that.state1,//数据框的值传给后端
          username: that.user_name,
        })
        .then((res) => {
          if (res.data.code === 1) {
            console.log(res.data.hists);
          } else {
            console.log(that.$route.params.user_name);
            that.$message.error("后台数据存储异常");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      this.get_history();

    },
    message() {//传递用户名和密码
      sessionStorage.setItem("user", JSON.stringify({
        username: this.username,
        password: this.password
      }))
    },
    //前端获取文本中的文字
    showFile(input) {
      //支持chrome IE10
      if (window.FileReader) {
        var file = input.target.files[0];
        var reader = new FileReader();
        reader.onload = ((event) => {
          //显示文件
          this.state1 = event.target.result;
          console.log(event.target.result)
        })
        console.info(file)
        console.info(reader);
        reader.readAsText(file);
      }
      else {
        alert("FileReader Not supported by your browser!");
      }
    }
  },
  mounted() {
    this.restaurants = this.options;
  }
};
</script>
<style scoped>
.all {
  background-image: url('./imag/5.jpg');
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  width: 100%
}

.top-bar {
  width: 100%;
  height: 50px;
  margin: 0;
  display: flex;
}

.box-top {
  width: 100%;

  background-color: rgba(50, 242, 136, 0.829);
  padding: 20px;
  /*border-bottom-left-radius: 8px;*/
  /*border-bottom-right-radius: 8px;*/
}

.top-ui {
  width: 100%;
  min-width: 800px;
  height: 50px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-ui li {
  width: 10%;
  min-width: 50px;
  margin: -5px 50px 0 70px;
  float: left;
  text-align: center;
  display: block;
}

.top-ui a {
  color: rgb(201, 136, 51);
  text-decoration: none;
}

.top-ui a:hover {
  color: rgb(219, 41, 41);
}

.top-ui img {
  height: 40px;
  margin: 0;
  padding: 0;
  display: inline;
  position: relative;
  top: -10px;
}

.change {
  text-align: center;
  font-size: 30px;
  color: rgb(226, 43, 43);
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.history-tag {
  margin: 20px;
}
 .tp.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .tp.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .tp.avatar-uploader-icon {
    font-size: 22px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 18px;
    text-align: center;
  }
  .tp.avatar {
    width: 17px;
    height: 17px;
    display: block;
  }
</style>
